<template>
  <div>
    <div><el-button @click="generate">生成一局</el-button></div>
    <div class="boom-group">
      <template v-for="(e, i) in booms">
        <div class="boom-line" :key="i">
          <template v-for="(cell, j) in e">
            <div class="boom-cell" :key="j">
              <el-button :type="cell === 9 ? 'danger' : 'info'">{{
                cell
              }}</el-button>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "Mine2View",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      booms: [
        [0, 0, 9, 0],
        [0, 9, 9, 0],
      ],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    generate() {
      // this.$message.success("hi");
      //  生成数组初始化0
      let q = [];
      let boomLength = 7;
      let boomNum = 8;
      for (let i = 0; i < boomLength; i++) {
        q[i] = [];
        for (let j = 0; j < boomLength; j++) {
          q[i][j] = 0;
        }
      }
      //生成随机雷
      for (let number = 0; number < boomNum; ) {
        let m = Math.floor(Math.random() * boomLength);
        let n = Math.floor(Math.random() * boomLength);
        if (q[m][n] === 9) {
          continue;
        }
        q[m][n] = 9;
        number++;
      }
      //九宫格计数。
      // (1,1)

      for (let i = 0; i < boomLength; i++) {
        for (let j = 0; j < boomLength; j++) {
          // q[i][j]如果当前九宫格核心是雷 则跳过
          if (q[i][j] === 9) {
            continue;
          }
          //循环计数
          let count = 0;
          for (let k = -1; k <= 1; k++) {
            for (let l = -1; l <= 1; l++) {
              if (k === 0 && l === 0) {
                continue;
              }
              //如果是雷 就计数
              if (q[i + k] && q[i + k][j + l]) {
                if (q[i + k][j + l] === 9) {
                  count++;
                }
              }
            }
          }
          q[i][j] = count;
        }
      }

      console.log(q);
      this.booms = q;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.boom-group {
  //border: 10px solid red;
  display: flex;
  flex-direction: column;
}
.boom-line {
  //border: 4px solid blue;
  display: flex;
  flex-direction: row;
  padding: 4px;
}
.boom-cell {
  padding: 0 4px;
}
</style>
